<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<title>余额变动表</title>
</head>
<body>
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h3>账户信息:</h3>
			</div>
			<div class="ibox-content">
				<strong><p>账户当前余额是：<a id="balance"></a>&nbsp;元</p></strong>
				<hr/>
				<strong><p>账户当前支付宝账号：<a id="alipayaccount"></a></p></strong>
				<hr/>
				<strong><p>账户当前支付宝姓名：<a id="alipayname"></a></p></strong>
			</div>
		</div>
	</div>
	
	<!-- 动态加载table -->
	<table id="balancerecordtab" class="table table-hover"></table>
	
	<div class="modal inmodal fade" id="bundlingModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">绑定支付宝</h4>
               	</div>
                <div class="modal-body">
                	<div class="form-group draggable">
						<label class="control-label">支付宝账号*</label>
						<input type="text" min="1" id="Balipayaccount" class="form-control" placeholder="请输入正确的支付宝账号，会影响到您的收入">
					</div>
					<div class="form-group draggable">
						<label class="control-label">支付宝账号对应姓名*</label>
						<input type="text" min="1" id="Balipayname" class="form-control" placeholder="请输入正确的支付宝账号姓名，是您绑定支付宝的姓名">
					</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="BalipayaccountSubmit()" id="bundlingModalBtn">提交</button>
           		</div>
           	</div>
        </div>
	</div>
	
	<div class="modal inmodal fade" id="editModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改支付宝</h4>
               	</div>
                <div class="modal-body">
                	<div class="form-group draggable">
						<label class="control-label">支付宝账号*</label>
						<input type="text" min="1" id="Ealipayaccount" class="form-control" placeholder="请输入正确的支付宝账号，会影响到您的收入">
					</div>
					<div class="form-group draggable">
						<label class="control-label">支付宝账号对应姓名*</label>
						<input type="text" min="1" id="Ealipayname" class="form-control" placeholder="请输入正确的支付宝账号姓名，是您绑定支付宝的姓名">
					</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="EalipayaccountSubmit()" id="editModalBtn">提交</button>
           		</div>
           	</div>
        </div>
	</div>
	<!-- 会诊订单详情页 -->
	<div class="modal inmodal fade" id="detailsModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:800px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">会诊订单详情</h4>
               	</div>
                <div class="modal-body">
                	<h2>订单详情！</h2>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
           		</div>
           	</div>
        </div>
	</div>
	
	<script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery-confirm.js"></script>
    <script type="text/javascript">
    $(function(){
    	getbalance();
    	getalipayaccount();
    })
  	//根据窗口调整表格高度
    $(window).resize(function() {
        $('#balancerecordtab').bootstrapTable('resetView', {
            height: tableHeight()
        })
    })
    //查询按钮事件
    $('#search_btn').click(function(){
        $('#balancerecordtab').bootstrapTable('refresh');
    })
    //tableHeight函数
    function tableHeight(){
        //可以根据自己页面情况进行调整
        return $(window).height()-280;
    }
  	function refreshTab(){
  		$('#balancerecordtab').bootstrapTable('refresh');
  		getbalance();
  	}
	//生成用户数据
    $('#balancerecordtab').bootstrapTable({
        method: 'get',
        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
        url:"${pageContext.request.contextPath}/Main/myinfo/listbalancerecord.action",//要请求数据的文件路径
        height:tableHeight(),//高度调整
        striped: true, //是否显示行间隔色
        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
        pageNumber: 1, //初始化加载第一页，默认第一页
        pagination:true,//是否分页
        queryParamsType:'limit',//查询参数组织方式
        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
            return {//这里的params是table提供的    
                offset : params.offset,//从数据库第几条记录开始    
                limit : params.limit,
                //type:null
            //找多少条    
            };},//请求服务器时所传的参数
        sidePagination:'server',//指定服务器端分页
        pageSize:10,//单页记录数
        pageList:[1,5,10,30,50,100],//分页步进值
        showRefresh:true,//刷新按钮
        showColumns:true,
        clickToSelect: true,//是否启用点击选中行
        toolbarAlign:'right',//工具栏对齐方式
        buttonsAlign:'right',//按钮对齐方式
        toolbar:'#toolbar',//指定工作栏
        columns:[
            {
                title:'全选',
                field:'select',
                //复选框
                checkbox:true,
                width:25,
                align:'center',
                valign:'middle'
            },
            {
                title:'ID',
                field:'hosppurseid',
                sortable:true,
                visible:true
            },
            {
                title:'金额变动类型',
                field:'pursetypename',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'变动时间',
                field:'hosppursetime',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'变动金额',
                field:'hosppurseamount',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'对应的交易记录id',
                field:'payid',
                sortable:false,
                formatter:nullChange
            },
            {
                title:'账户余额',
                field:'hosppursebalance',
                sortable:true,
                formatter:nullChange
            },
            {
                title:'操作',
                field:'operate',
                align:'center',
                //列数据格式化
                formatter:operateConfirm
            }
        ],
        locale:'zh-CN',//中文支持,
        responseHandler:function(rows){
            //在ajax获取到数据，渲染表格之前，修改数据源
            return rows;
        }
    })
    //对所有空值规格化，null-》未填写
    function nullChange(value,row,index){
		if(value=='null' || value==''){
			return '未填写'
		}else{
			return value;
		}
	}
  	//操作序列规则化
	function operateConfirm(value,row,index){
		return '<button class="btn btn-info" style="height:30px" onclick="Details('+row.hosppurseid+')">详情</button>';
	}
  	//获取账户余额
  	function getbalance(){
  		$.ajax({
  			type:'post',
  			url:"${pageContext.request.contextPath}/Main/myinfo/getBalance.action",
  			async: true,
  			success:function(data){
  				if(data.code==100){
  					$("#balance").html(data.balance);
  				}else{
  					$.alert(data.msg);
  				}
  			},
  			error:function(request){
  				$.alert("获取余额失败！");
  			}
  		})
  	}
  	//获取当前账户的支付宝账号
  	function getalipayaccount(){
  		$.ajax({
  			type:'post',
  			url:"${pageContext.request.contextPath}/Main/myinfo/getAlipayaccount.action",
  			async: true,
  			success:function(data){
  				if(data.code==100){
  					$("#alipayaccount").html(NullCheck1(data.alipayaccount));
  					$("#alipayname").html(NullCheck2(data.alipayname));
  				}else{
  					$.alert(data.msg);
  				}
  			},
  			error:function(request){
  				$.alert("获取支付宝账号失败！");
  			}
  		})
  	}
  	function NullCheck1(data){
  		if(data==""){
  			return "当前支付宝账户为空，请及时绑定&nbsp;&nbsp;<a data-toggle='modal' href='#bundlingModal'>（点我绑定）</a>"
  		}else{
  			return "当前支付宝账户为："+data+"&nbsp;&nbsp;<a data-toggle='modal' href='#editModal'>（点我修改）</a>"
  		}
  	}
  	function NullCheck2(data){
  		if(data==""){
  			return "当前支付宝账户姓名为空，请及时绑定";
  		}else{
  			return "当前支付宝姓名为："+data;
  		}
  	}
  	function BalipayaccountSubmit(){
  		var alipayaccount = $("#Balipayaccount").val();
  		var alipayname = $("#Balipayname").val();
  		var modalid="bundlingModal";
  		if(alipayaccount=="" || alipayname==""){
  			$.alert("填写信息不可为空！");
  			return false;
  		}
  		$.confirm({
		    title: '提示!',
		    content: '是否绑定该支付宝账号？',
		    type: 'blue',
		    typeAnimated: true,
		    buttons: {
		    	确定: function () {
		    		$("#bundlingModalBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
		    		$("#bundlingModalBtn").prop('disabled',true);
		    		//向服务器发送医院确认订单操作！
		        	ajaxalipaySubmit(alipayaccount,alipayname,modalid);
		    	},
				取消: function () {$('#bundlingModal').modal('hide');},
		    }	
		});
  	}
  	function EalipayaccountSubmit(){
  		var alipayaccount = $("#Ealipayaccount").val();
  		var alipayname = $("#Ealipayname").val();
  		var modalid="editModal";
  		if(alipayaccount=="" || alipayname==""){
  			$.alert("填写信息不可为空！");
  			return false;
  		}
  		$.confirm({
		    title: '提示!',
		    content: '是否修改为该支付宝账号？',
		    type: 'blue',
		    typeAnimated: true,
		    buttons: {
		    	确定: function () {
		    		$("#editModalBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
		    		$("#editModalBtn").prop('disabled',true);
		    		//向服务器发送医院确认订单操作！
		        	ajaxalipaySubmit(alipayaccount,alipayname,modalid);
		    	},
				取消: function () {$('#editModal').modal('hide');},
		    }	
		});
  	}
  	//请求update操作
  	function ajaxalipaySubmit(alipayaccount,alipayname,modalid){
  		$.ajax({
    		type:"post",
    		url:"${pageContext.request.contextPath}/Main/myinfo/Updatealipayaccount.action",
    		async: true,
            data:"alipayaccount="+alipayaccount+"&alipayname="+alipayname,
           	success:function(data){
           		$("#"+modalid+"Btn").html('提交');
	    		$("#"+modalid+"Btn").prop('disabled',false);
           		$.alert(data.msg);
           		if(data.code==100){
           			loadingaccount(alipayaccount,alipayname);
           			$("#"+modalid).modal("hide");
           		}
           	},error:function(request){
           		$.alert("请求出错了！");
           		$("#"+modalid+"Btn").html('提交');
	    		$("#"+modalid+"Btn").prop('disabled',false);
           	}
    	})
  	}
  	//页面非刷新加载
  	function loadingaccount(alipayaccount,alipayname){
  		$("#alipayaccount").html(NullCheck1(alipayaccount));
  		$("#alipayname").html(NullCheck2(alipayname));
  	}
  	function Details(hosppurseid){
  		$("#detailsModal").modal("show");
  	}
    </script>
</body>
</html>